anchor rt-components
.ui.segments
    h3.ui.top.attached.block.header rt-components #[a(href="#rt-components") #[i.linkify.icon]]
    .ui.attached.segment
        pre rt-button
        
    h3.ui.block.big.attached.header Examples
    .ui.attached.segment
        h3.header Buttons has icons representing their states 
        rt-button.green(state="" topic="public.my-test-plc.testOutput" value="{{rtButton.test1}}") 
            | Button Text 
            +iff('rtButton.test1')
                span(style="color: red") (press to turn on)
            +else
                span(style="color: yellowgreen") (press to turn off)
            +endif
            
    .ui.attached.segment 
        .ui.ten.column.grid
            +each('[0, 1, 2, 3]')
                .column 
                    .ui.fluid.card 
                        .image 
                            led.mini(topic="public.my-test-plc.testInput{{.}}")
                        .content
                            .header Input.{{.}}

    .ui.attached.segment 
        p 
            b my-test-plc.testLevel1: {{rtComponents.test2}}
            sync(value="{{rtComponents.test2}}" topic="public.my-test-plc.testLevel1")

    .ui.attached.segment 
        h3.header Checkbox        
        checkbox(value="{{rtButton.test1}}")
            | My RT Checkbox
            sync(value="mahmut" topic="public.hello.world")
                
        

    
